<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 视频点播系统</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .login-container {
            max-width: 400px;
            margin: 50px auto;
            padding: 30px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background: #0056b3;
        }
        
        .links {
            text-align: center;
            margin-top: 20px;
        }
        
        .links a {
            color: #007bff;
            text-decoration: none;
            margin: 0 10px;
        }
        
        .alert {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            display: none;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h2>用户登录</h2>
            <p>登录您的账户来使用视频点播系统</p>
        </div>
        
        <div id="alert" class="alert"></div>
        
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" required>
            </div>
            
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" required>
            </div>
            
            <button type="submit" class="btn">登录</button>
        </form>
        
        <div class="links">
            <a href="register.html">注册新账户</a>
            <a href="index.html">返回首页</a>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/auth.js"></script>
    <script>
        function showAlert(message, type) {
            const alert = $('#alert');
            alert.removeClass('alert-error alert-success');
            alert.addClass('alert-' + type);
            alert.text(message);
            alert.show();
            
            setTimeout(() => {
                alert.hide();
            }, 5000);
        }
        
        function getCookie(name) {
            const value = "; " + document.cookie;
            const parts = value.split("; " + name + "=");
            if (parts.length === 2) return parts.pop().split(";").shift();
            return null;
        }
        
        function setCookie(name, value, days) {
            const expires = new Date();
            expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = name + "=" + value + ";expires=" + expires.toUTCString() + ";path=/";
        }
        
        // 检查是否已登录
        $(document).ready(function() {
            if (authManager.isLoggedIn()) {
                // 已登录，跳转到首页
                window.location.href = 'index.html';
            }
        });
        
        $('#loginForm').submit(function(e) {
            e.preventDefault();
            
            const formData = {
                username: $('#username').val(),
                password: $('#password').val()
            };
            
            $.ajax({
                url: '/user/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.result) {
                        showAlert('登录成功，正在跳转...', 'success');
                        
                        // 使用认证管理器保存登录信息
                        authManager.saveAuth(response.session_id, response.user_info, response.expires_at);
                        
                        // 跳转到首页
                        setTimeout(() => {
                            window.location.href = 'index.html';
                        }, 1000);
                    } else {
                        showAlert(response.reason || '登录失败', 'error');
                    }
                },
                error: function(xhr) {
                    let message = '登录失败';
                    if (xhr.responseJSON && xhr.responseJSON.reason) {
                        message = xhr.responseJSON.reason;
                    }
                    showAlert(message, 'error');
                }
            });
        });
    </script>
</body>
</html> 